<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国铁路12306网站</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4785291_wn0ys5swff.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/fixed.css">
</head>
<body>
    
    <div id="app">
        
        <!-- 致敬页面 -->
        <div v-show="go_home" @click="go_home = false" class="rember-go-home">
            <span>点击屏幕任意处，显现页面</span>
            <h2>望屏幕前的帅哥美女们，再忙也别忘了，常回家看看！！！</h2>
        </div>

        <!-- 头部区域 包含导航栏 -->
        <div class="header">
            <!-- 头部样式 -->
            <div class="header-con wrapper">
                <!-- logo图区域 -->
                <h1 class="logo-img">
                    <a href="">中国铁路12306网站</a> 
                </h1>

                <div class="header-right">
                    <!-- 搜索框区域 -->
                    <div class="search-box">
                        <input @blur="isFocus = false" @focus="isFocus = true" :style="{borderColor: isFocus == true ?'#3699fc':'#dedede'}" class="search-inp" placeholder="搜索车票、餐饮、常旅客、相关规章" type="text">
                        <button :style="{backgroundColor: isFocus==true?'rgb(38,118,227)':'#3b99fc'}" class="search-btn iconfont icon-sousuo"></button>
                    </div>
                    <!-- 功能菜单区域 -->
                    <ul >
                        <li><a href="">无障碍</a></li>
                        <li><a href="">敬老版</a></li>
                        <li><a href="">English<i class="iconfont icon-daosanjiao"></i></a></li>
                        <li><a href="">我的12306<i class="iconfont icon-daosanjiao"></i></a></li>
                        <li>
                            <a href="">登录</a>
                            <a href="">注册</a>
                        </li>

                    </ul>
                </div>
                
            </div>

            <!-- 导航栏 -->
            <div class="nav-box">
                <div class="wrapper">
                    <ul class="nav-bar">
                        <li>首页</li>
                        <li @mouseleave="myIndex = 99" @mouseenter="handleMouseOver(index)" v-for="(item,index) in navBar">
                            <div class="li-content">
                                {{item}}<i class="iconfont icon-xuanzejiantou"></i>
                            </div>                           
                        </li>
                    </ul>
                </div>


                <div class="wrapper">
                    <div @mouseleave="myIndex = 99" @mouseenter="handleMouseOver(index)" v-show="myIndex==index" v-for="(items,index) in navlist" class="nav-list-box" >
                        <ul v-for="(item,index_ul) in items" class="nav-list-ul">
                            <!-- item 表示对象  item.lis 表示每一个对应的 ul的lis -->
                            <h3 v-show="item.title != 'null' " class="title">{{item.title}}</h3>
                            <li v-for="(item_li,index_li) in item.lis"><a href="">{{item_li}}</a></li>
                        </ul>
                    </div> 
                </div>
            </div>



        </div>



        <!-- 轮播图区域 -->
        <div class="banner-box">
            <!-- 轮播图本图 -->
            <div class="fullSlide">
                <!-- 轮播图 -->
                <div class="bd">
                    <ul :style="{width: ulWidth+'px'}" class="banner-ul">
                        <li @mouseleave="startInterval" @mouseover="endInterval" v-for="(item,index) in slideMap" :style="{backgroundImage:item}" class="banner-li"></li>
                    </ul>
                </div>
                <!-- 轮播图的小圆点 -->
                <div class="hd">
                    <ul class="circles">
                        <li @mouseleave="startInterval" @mouseover="endInterval"  @click="nextSlide(index)" v-for="(item,index) in slideMap" :class="{circle:true ,onselect:circle_index == index}"></li>
                    </ul>
                </div>
            </div>

            <!-- 搜索框 -->
            <div class="search-frame">
                <!-- 搜索框左边 -->
                <div class="search-side">
                    <ul class="side-ul">
                        <li @click="side_li_index = index" v-for="(item ,index) in side_li" :class="{'side-li':true, 'side-li-select':side_li_index == index}">
                            <i :class="{iconfont:true,'icon-huochepiaomianxing':index==0?true:false,'icon-chaxun':index==1?true:false,'icon-dingcan':index==2?true:false}"
                            :style="{color:side_li_index == index ? '#3699fc' : '#fff',fontSize:'22px',marginRight:'5px'}"></i>{{item}}
                        </li>                       
                    </ul>
                </div>
                <!-- 搜索框右边 -->
                <div class="search-main">
                    <!-- 车票 -->
                    <div :style="{display: side_li_index == 0 ? 'block':'none'}" class="search-main-item">
                        <div class="search-main-tab">
                            <!-- 右边框的头部区域 -->
                            <div class="search-tab-hd">
                                <ul class="search-tab-hd-ul">
                                    <li @click="changeForm(index)" v-for="(item,index) in table_head" :class="{'search-tab-hd-li' : true, 'search-tab-hd-select' : head_index == index}">{{item}}</li>
                                </ul>
                            </div>
                            <!-- 右边框的身体部位 -->
                            <div class="search-tab-bd">
                                <!-- 单程 -->
                                <div class="search-tab-item">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span>出发地</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>到达地</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>出发日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-check">
                                            <span>学生</span><input type="checkbox" name="" id="">
                                            <span>高铁/动车</span><input type="checkbox" name="" id="">
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                <!-- 往返 -->
                                <div class="search-tab-item" style="display: none;">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span>出发地</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>到达地</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>出发日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>返程日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-check">
                                            <span>学生</span><input type="checkbox" name="" id="">
                                            <span>高铁/动车</span><input type="checkbox" name="" id="">
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                <!-- 中转换乘 -->
                                <div class="search-tab-item" style="display: none;">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span>出发地</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>到达地</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>出发日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-check">
                                            <span>学生</span><input type="checkbox" name="" id="">
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                <!-- 退改签 -->
                                <div class="search-tab-item" style="display: none;">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span>查询类型</span>
                                            <div class="search-form-query"><input type="radio" id="book" name="date"><label for="book">订票日期</label> <input type="radio" name="date" id="ride"> <label for="ride">乘车日期</label></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>开始日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>结束日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item-last">
                                            <span>关键字</span><!-- 这里的最后一个样式 多一个margin-bottom 到时候设置到后面的表单最后一项就可以了 其他的都差不多-->
                                            <div class="search-form-bottom"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <!-- 常用查询 -->
                    <div :style="{display: side_li_index == 1 ? 'block':'none'}" class="search-main-item">
                        <div class="search-main-tab">
                            <!-- 右边框的头部区域 -->
                            <div class="search-tab-hd">
                                <ul class="search-tab-hd-ul">
                                    <li @click="changeForm(index)" v-for="(item,index) in table_head_query" :class="{'search-tab-hd-li' : true, 'search-tab-hd-select' : head_index == index}">{{item}}</li>
                                </ul>
                            </div>
                            <!-- 右边框的身体部位 -->
                            <div class="search-tab-bd">
                                <!-- 正晚点 -->
                                <div class="search-tab-item">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span>查询类型</span>
                                            <div class="search-form-query"><input type="radio" id="arrive" name="date"><label for="arrive">到达站</label> <input type="radio" name="date" id="go"> <label for="go">出发站</label></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span>车站</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item-last">
                                            <span>车次</span><!-- 这里的最后一个样式 多一个margin-bottom 到时候设置到后面的表单最后一项就可以了 其他的都差不多-->
                                            <div class="search-form-bottom"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                <!-- 检票口 -->
                                <div class="search-tab-item" style="display: none;">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span><b>*</b>乘车日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item">
                                            <span><b>*</b>车次</span>
                                            <div class="search-form-loc"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item-last">
                                            <span><b>*</b>乘车站</span><!-- 这里的最后一个样式 多一个margin-bottom 到时候设置到后面的表单最后一项就可以了 其他的都差不多-->
                                            <div class="search-form-bottom"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                <!-- 起售时间 -->
                                <div class="search-tab-item" style="display: none;">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span><b>*</b>起售日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item-last">
                                            <span><b>*</b>起售车站</span><!-- 这里的最后一个样式 多一个margin-bottom 到时候设置到后面的表单最后一项就可以了 其他的都差不多-->
                                            <div class="search-form-bottom"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                <!-- 天气查询 -->
                                <div class="search-tab-item" style="display: none;">
                                    <div class="search-form">
                                        <div class="search-form-item-last">
                                            <span>目的地</span><!-- 这里的最后一个样式 多一个margin-bottom 到时候设置到后面的表单最后一项就可以了 其他的都差不多-->
                                            <div class="search-form-bottom"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 订餐 -->
                    <div :style="{display: side_li_index == 2 ? 'block':'none'}" class="search-main-item">
                        <div class="search-main-tab">
                            <!-- 右边框的头部区域 -->
                            <div class="search-tab-hd">
                                <ul class="search-tab-hd-ul">
                                    <li :class="{'search-tab-hd-li' : true, 'search-tab-hd-select' :true}">预定</li>
                                    <li :class="{'search-tab-hd-li' : true,}">餐饮预定</li>
                                </ul>
                            </div>
                            <!-- 右边框的身体部位 -->
                            <div class="search-tab-bd">
                                <!-- 预定 -->
                                <div class="search-tab-item">
                                    <div class="search-form">
                                        <div class="search-form-item">
                                            <span><b>*</b>出发日期</span>
                                            <div class="search-form-time"><input type="date"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-item-last">
                                            <span>出发车次</span><!-- 这里的最后一个样式 多一个margin-bottom 到时候设置到后面的表单最后一项就可以了 其他的都差不多-->
                                            <div class="search-form-bottom"><input type="text"><i class="iconfont "></i></div>
                                        </div>
                                        <div class="search-form-button"><button>查询</button></div>
                                    </div>
                                </div>
                                <!-- 另外一个是直接跳转页面了  直接空着 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <!-- 主题内容部分 -->
        <div class="wrapper">
            <!-- 服务 -->
            <ul class="service-list">
                <li class="service-li" v-for="item in service_list">
                    <a href="">
                        <i :style="{backgroundPositionY:'-' + item.index * 40 + 'px'}"></i>
                        <div>{{item.title}}</div>
                    </a>
                </li>
            </ul>
            <!-- 服务列表大图 -->
            <div class="service-lg">
                <ul class="service-lg-list">
                    <li v-for="item in lg_list">
                        <a href="">
                            <img :src="item" alt="">
                        </a>
                    </li>                   
                </ul>
            </div>
            <!-- 新闻 -->
            <div class="news-tab">
                <!-- 头部标题 -->
                <div class="tab-hd">
                    <ul class="lists">
                        <!-- TODO: 点击事件绑定函数 去显示 底下的内容框的 传索引进去 -->
                        <li @click="news_hd_index = index" :class="{lists_li:true,lists_active: news_hd_index == index}" v-for="(item ,index) in news_hd">{{item}}</li>
                    </ul>
                </div>
                <!-- 头部标题对应的内容框 -->
                <div class="tab-bd">
                    <!-- 公告样式  大框设置 padding 限制内容输出位置-->
                    <div v-for="(items,index) in news_bd_title" class="news-item" :style="{display:news_hd_index == index ? 'block':'none'}">
                        <!-- 中框包含两个 区域 地下区域共用 -->
                        <div class="news-index">
                            <ul class="news-index-list">
                                <li v-for="item in items" class="news-body-li">
                                    <a href="">{{item.title}}</a>
                                    <span class="news-time">{{item.time}}</span>
                                </li>
                            </ul>
                            <div class="news-more"><a href="">更多></a></div>
                        </div>
                    </div>

                    <!-- 最后一个格式不能共用  省略一手  -->
                </div>
            </div>
        </div>

        <!--尾部样式  -->
        <div class="footer">
            <!-- 底部链接区域 -->
            <div class="footer-con wrapper">
                <!-- 左边图片链接 -->
                <div class="foot-links">
                    <h2>友情链接</h2>
                    <ul class="foot-link-list">
                        <li v-for="item in linkImg">
                            <a href="">
                                <img :src="item" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 右边二维码 -->
                <ul class="foot-code">
                    <li v-for="item in code_list">
                        <h2 class="foot-con-tit">{{item.title}}</h2>
                        <div class="code-pic">
                            <img :src="item.img" alt="">
                        </div>
                    </li>
                    <div class="code-tips">
                        官方APP下载，目前铁路未授权其他网站或APP开展类似服务内容，敬请广大用户注意。
                    </div>
                </ul>
            </div>
            <!-- 底部文本提示区域 -->
            <div class="footer-txt">
                <p>
                    <span class="mr">版权所有©2008-2025</span>
                    <span class="mr">中国铁道科学研究院集团有限公司</span>
                    <span>技术支持：铁旅科技有限公司</span>
                </p>
                <p>
                    <span class="mr">
                        <img src="img/gongan.png" alt="">
                        京公网安备 11010802038392号
                    </span>
                    <span class="mr">|</span>
                    <span class="mr">京ICP备05020493号-4</span>
                    <span class="mr">|</span>
                    <span>ICP证：京B2-20202537</span>
                </p>
            </div>
        </div>

        <!-- 右侧固定按钮 -->
        <div v-if="right_show" class="fixed-right">
            <ul class="fixed-right-menu">
                <li class="menu-item"><a href=""><i class="iconfont icon-zizhutuiguang"></i>最新发布</a></li>
                <li class="menu-item"><a href=""><i class="iconfont icon-dianhua"></i>联系客服</a></li>
                <li class="menu-item"><a href=""><i class="iconfont icon-erweima"></i><br>APP下载</a></li>
                <li class="menu-item"><a @click.prevent="right_show = false" href=""><i class="iconfont icon-guanbi"></i>关闭</a></li>
            </ul>
        </div>

        <!-- 回顶部按钮 -->
        <div v-show="go_home_show" class="gohome">
            <a href="" @click.prevent="gohome">
                <i class="iconfont icon-icon-"></i>
            </a>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                right_show:true,
                go_home:true,
                go_home_show:false,
                isFocus : false,
                navBar:['车票','团购服务','会员服务','站车服务','商旅服务','出行指南','信息查询'],
                isHover:false,
                navlist:
                [
                    // 大数组navlist：控制div即替换的盒子 ，小数组代表单个盒子里面ul的个数 title表示标题 一个ul只有一个title 一个ul有多个小li 用lis表示
                    [   //一个对象表示一个ul
                        {title:'购买',lis:['单程','往返','中转换乘','计次·定期票']},
                        {title:'变更',lis:['退票','改签','变更到站']},
                        {title:'更多',lis:['中铁银通卡','广九直通车','国际列车']}
                    ],
                    [   
                        {title:'null',lis:['务工人员','学生团体']},       
                    ],
                    [   
                        {title:'null',lis:['会员管理','积分账户','积分兑换','会员专享','会员中心']},
                    ],
                    [   
                        {title:'null',lis:['重点旅客预约','便民托运','约车服务','车站引导','遗失物品查找','动车组介绍','定制接送','站车风采']},       
                    ],
                    [   //lis 表示个是 一个ul里面所有的 li
                        {title:'null',lis:['餐饮·特产','保险','雪具托运']},
                    ],
                    [  
                        {title:'常见问题',lis:['车票','购票','改签','退票']},
                        {title:'旅客须知',lis:['身份核验','更多']},
                        {title:'相关章程',lis:['铁路旅客运输规程','广深港高速铁路跨境旅客运输','铁路旅客禁止、限制携带','更多']}
                    ],
                    [   
                        {title:'常用查询',lis:['正晚点','时刻表','公布票价','检票口','起售时间','最新发布','天气','交通查询','代售点','客服电话','列车状态','信用信息']}
                    ],
                ],
                isNull:"", //拿来判断是否跟h3一样为空 为空隐藏
                myIndex : 99,
                slideMap:
                [
                'url(img/banner02.jpg)','url(img/banner03.jpg)','url(img/banner04.jpg)',
                'url(img/banner05.jpg)','url(img/banner06.jpg)','url(img/banner01.jpg)',
                ],
                ulWidth:0,
                circle_index:0,
                interval_id:null,
                side_li:['车票','常用查询','订餐'],
                side_li_index:0,
                table_head:['单程','往返','中转换乘','退改签'],
                table_head_query:['正晚点','检票口','起售时间','天气查询'],
                head_index:0,
                service_list:[
                    {index:1,title:'重点旅客预约'},
                    {index:5,title:'遗失物品查找'},
                    {index:3,title:'约车服务'},
                    {index:4,title:'便民托运'},
                    {index:2,title:'车站引导'},
                    {index:6,title:'站车风采'},
                    {index:8,title:'用户反馈'},
                ],
                lg_list:[
                    'img/abanner01.jpg',
                    'img/abanner02.jpg',
                    'img/abanner03.jpg',
                    'img/abanner04.jpg',
                ],
                news_hd:['最新发布','常见问题','信用信息'],
                news_hd_index:0 ,
                news_bd_title:[
                    [
                        {title:'公告',time:'2024-12-11'},{title:'关于铁路客运推广使用全面数字化的电子发票的公告',time:'2024-11-07'},
                        {title:'关于优化铁路车票改签规则的公告',time:'2024-01-11'},{title:'外国护照身份核验使用说明',time:'2023-12-13'},
                        {title:'铁路旅客禁止、限制携带和托运物品目录',time:'2023-11-30'},{title:'公告',time:'2022-12-22'},
                        {title:'候补购票操作说明',time:'2024-04-19'},{title:'公告',time:'2022-12-22'},
                        {title:'关于调整互联网、电话订票起售时间的公告',time:'2024-12-18'},{title:'中国铁路成都局集团有限公司关于2024年12月20日至21日加开部分列车的公告',time:'2024-12-18'}
                    ],
                    [
                        {title:'实名制车票',time:''}, {title:'售票窗口购票',time:''},
                        {title:'互联网购票',time:''}, {title:'互联网退票',time:''},
                        {title:'随身携带品',time:''}, {title:'进出站',time:''},
                        {title:'丢失购票时使用的有效身份证证件',time:''}, {title:'使用居民身份证直接检票乘车',time:''},
                        {title:'广深港跨境列车',time:''},
                    ]
                ],
                linkImg:['img/link01.png','img/link02.png','img/link03.png','img/link04.png'],
                code_list:[
                    {title:'中国铁路官方微信',img:'img/zgtlwx.png'},
                    {title:'中国铁路官方微博',img:'img/zgtlwb.png'},
                    {title:'12306公众号',img:'img/public.png'},
                    {title:'铁路12306',img:'img/download.png'},
                ]
            }
                
            ,
            methods:{
                myMethod(index){
                    this.myIndex = index
                },

                //自动计算ul 高度函数
                autoHeight(index){
                    const box = document.querySelectorAll(".nav-list-box")
                    
                    // box.forEach(item =>{
                    //     let uls = item.querySelectorAll('.nav-list-ul')
                    //     let title = item.querySelector(".nav-list-ul .title")
                    //     let box_height = 0 // 盒子的高度  由li 的高度 和 title 的高度组成 但 有的没有 title
                    //     let title_height = 0
                    //     let li_height = 0
                    //     let rows = []
                    //     let li_max_row = 0
                    //     //根据 ul 的个数 进行第一个判断  不为一  说明肯定有title
                    //     if(uls.length !== 1){
                    //         // 将拿到 一个 ul 里面的 li 的所有长度  选出最大的长度  / 2 得到 li 的高度
                    //         uls.forEach(item_ul =>{
                    //             const lis = item_ul.querySelectorAll('li')
                    //             const row = Math.ceil(lis.length / 2) //拿到li的行数
                    //             rows.push(row)                
                    //         })
                    //         // 求出li的行数最大值
                    //         rows.forEach(h =>{
                    //             li_max_row = h > li_max_row? h :li_max_row
                    //         })
                    //         title_height = title.offsetHeight
                    //         li_height = item.querySelector('.nav-list-ul li').offsetHeight * li_max_row
                    //         box_height = li_height + title_height
                    //         //console.log(box_height)
                    //     }
                    //     else{
                    //         if(title.textContent !== 'null'){
                    //         // ul的 个数 为 1  有的由标题  有的没有  所以需要判断 这里是 有标题
                    //         li_max_row = Math.ceil(item.querySelectorAll('.nav-list-ul li').length / 6)
                    //         li_height = item.querySelector('.nav-list-ul li').offsetHeight * li_max_row
                    //         title_height = title.offsetHeight
                    //         box_height = li_height + title_height
                    //         //因为这个特殊 所以直接 在里面设置 宽度
                    //         title.style.width = '1100px'
                    //         }else{
                    //             li_max_row = Math.ceil(item.querySelectorAll('.nav-list-ul li').length / 6)
                    //             li_height = item.querySelector('.nav-list-ul li').offsetHeight * li_max_row
                    //             box_height = li_height + title_height
                    //             //console.log(box_height)
                    //         }
                    //     }
                        
                    //     item.style.height = box_height + 28 + 'px'
                    //     //console.log(box_height)
                    // })

                    let uls = box[index].querySelectorAll('.nav-list-ul')
                    let title = box[index].querySelector(".nav-list-ul .title")
                    let box_height = 0 // 代码有些bug  除了 可以在 这里面拿到的值  其他的都给默认值
                    let title_height = 24
                    let li_height = 32
                    let li_total_heihgt = 0
                    let rows = []
                    let li_max_row = 0
                    //根据 ul 的个数 进行第一个判断  不为一  说明肯定有title
                    if(uls.length !== 1){
                        // 将拿到 一个 ul 里面的 li 的所有长度  选出最大的长度  / 2 得到 li 的高度
                        uls.forEach(item_ul =>{
                            const lis = item_ul.querySelectorAll('li')
                            const row = Math.ceil(lis.length / 2) //拿到li的行数
                            rows.push(row)                
                        })
                        // 求出li的行数最大值
                        rows.forEach(h =>{
                            li_max_row = h > li_max_row? h :li_max_row
                        })
                        li_total_height = li_height * li_max_row //出个bug 直接获取元素的宽高获取 不到 只能给默认值 只计算行数
                        box_height = li_total_height + title_height  //高度直接给默认值 即默认带标题 在不带标题的地方 在把 title_height 取值为 0
                    }
                    else{
                        if(title.textContent !== 'null'){
                        // ul的 个数 为 1  有的由标题  有的没有  所以需要判断 这里是 有标题
                        li_max_row = Math.ceil(box[index].querySelectorAll('.nav-list-ul li').length / 6)
                        li_total_height = li_height * li_max_row
                        box_height = li_total_height + title_height
                        //因为这个特殊 所以直接 在里面设置 宽度
                        title.style.width = '1100px'
                        }else{
                            li_max_row = Math.ceil(box[index].querySelectorAll('.nav-list-ul li').length / 6)
                            li_total_height = li_height * li_max_row
                            //这里是没有 title的  所以给 title_height =0
                            title_height = 0
                            box_height = li_total_height + title_height
                        }
                    }
                    // console.log(box_height)
                    box[index].style.height = box_height + 28 + 'px'

                },
            
                handleMouseOver(index){
                    this.myMethod(index)
                    this.autoHeight(index)
                },
                // 轮播图下一张
                nextSlide(index){
                    this.circle_index = index
                    let ul = document.querySelector('.banner-ul')
                    // TODO: clone 的 平滑效果 还没实现
                    const li_width = 1517.6 
                    ul.style.transform = `translateX(-${li_width * index}px)`
                },
                // 开启定时器
                startInterval(){
                    let index = this.circle_index 
                    this.interval_id = setInterval(()=>{
                        if(index >= this.slideMap.length -1){
                            index = 0
                        }else{
                            index++
                        }
                        this.circle_index = index
                        let ul = document.querySelector('.banner-ul')
                        const li_width = 1517.6 
                        ul.style.transform = `translateX(-${li_width * index}px)`
                    },3000)
                },
                // 关闭定时器
                endInterval(){
                    clearInterval(this.interval_id)
                },
                // 得到轮播图的 ul 宽度
                getUlWidth(){
                    const lis = document.querySelectorAll('.banner-li')
                    const li_width = 1517.6
                    this.ulWidth = lis.length * li_width
                },
                // 改变 选择框的 表单项
                changeForm(index){
                    this.head_index = index
                    const main_items = document.querySelectorAll(".search-main-item")
                    const forms = main_items[this.side_li_index].querySelectorAll(".search-tab-item")
                    forms.forEach(item=>{
                        item.style.display = 'none'
                    })
                    forms[index].style.display = 'block'
                    this.setInputTime()
                },
                gohome(){
                    window.scrollTo({
                        top:0,
                        behavior:'smooth'
                    })
                },
                
                //设置所有的时间框
                setInputTime(){
                    const times = document.querySelectorAll(".search-form-time>input")
                    times.forEach(item =>{
                        var currentDate = new Date()

                        var year = currentDate.getFullYear()
                        var month = ("0" + (currentDate.getMonth()+1)).slice(-2)
                        var day = ("0" + currentDate.getDate()).slice(-2)

                        var currentDateStr = year + "-" + month + "-" + day
                        item.value = currentDateStr
                    })
                }
            },
            mounted: function(){
                this.getUlWidth()
                this.startInterval()
                window.addEventListener('scroll',()=>{
                    if(window.pageYOffset > 190){
                        this.go_home_show = true
                    }else{
                        this.go_home_show = false
                    }
                })
                this.setInputTime()
                
            }
        })
    </script>

</body>
</html>